import React from 'react'

/*
* 受控组件：基于修改数据 / 状态，让视图更新(推荐)
* 非受控组件：基于 ref 获取DOM元素，我们操作DOM，，让视图更新
*   基于 ref 获取 DOM 元素的语法
*       1. 给需要获取的元素设置 ref='xxx'，后期基于 this.refs.xxx 去获取相应的DOM元素(不推荐，严格模式下报错)
*       2. 把ref属性值设置为一个函数
*           + 第一个参数是当前DOM元素
*       3. 基于 React.createRef() 方法创建一个 ref对象  -> { current: null }
*    原理：在render渲染时，会获取到virtualDOM的ref属性，如果属性是一个字符串，成员值就是当前的DOM元素
*       + 如果属性值是一个字符串，则会给 this.refs 增加这样的一个成员，成员值就是当前的DOM元素
*       + 如果属性值是一个函数，则会把函数执行，把当前DOM元素传递给这个函数 (x -> DOM元素),在函数执行时会挂在实例上
*       + 如果属性值是一个ref对象，则会把dom元素赋值给对象的 current 属性
* */
class Demo extends React.Component {
    titleBox3 = React.createRef();// this.titleBox3 = ''

    render() {
        return <div>
            <h2 className='title' ref='titleBox'>温馨提醒</h2>
            <h2 className='title' ref={x => this.titleBox2 = x}>友情提示</h2>
            <h2 className='title' ref={this.titleBox3}>友情提示</h2>
        </div>
    }

    componentDidMount(prevProps, prevState, snapshot) {
        // 第一次渲染完毕：此时可以获取DOM元素
        console.log(this.refs.titleBox, 111)
        console.log(this.titleBox2, 222)
        console.log(this.titleBox3.current,33333)
    }
}

export default Demo